<template>
  <div class="echart-shape">
    <el-tabs
      v-model="activeTab"
      :class="`echart_tabs ${tabClass}`"
    >
      <el-tab-pane
        v-if="hasProp('shapeSetting')"
        :label="$demoi18n('echart.setting.shape')"
        name="shapeSetting"
      >
        <ShapeLineBar
          v-if="hasProp('shape-line-bar')"
          :form="form"
        />
        <SeriesPie
          v-if="hasProp('series-pie')"
          :form="form"
        />
        <SeriesTree
          v-if="hasProp('series-tree')"
          :form="form"
          :config="config"
        />
        <ShapeSankey
          v-if="hasProp('shape-sankey')"
          :form="form"
          :config="config"
        />
        <ShapeShape
          v-if="hasProp('shape-shape')"
          :form="form"
          :config="config"
        />

        <template v-if="hasBarLine">
          <el-radio-group
            v-if="hasBarLine"
            v-model="activeBarLineTab"
            size="default"
          >
            <el-radio-button label="series-bar">{{ $demoi18n('echart.option.bar') }}</el-radio-button>
            <el-radio-button label="series-line">{{ $demoi18n('echart.option.line') }}</el-radio-button>
          </el-radio-group>
          <SeriesBar
            v-show="activeBarLineTab === 'series-bar'"
            :form="form"
          />
          <SeriesLine
            v-show="activeBarLineTab === 'series-line'"
            :form="form"
          />
        </template>
        <template v-else>
          <SeriesBar
            v-if="hasProp('series-bar')"
            :form="form"
          />
          <SeriesLine
            v-if="hasProp('series-line')"
            :form="form"
          />
        </template>
      </el-tab-pane>
      <el-tab-pane
        v-if="hasProp('legendSetting')"
        :label="$demoi18n('echart.setting.legend')"
        name="legendSetting"
      >
        <Legend :form="form" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import ShapeLineBar from '@/components/common/echart/shape/shape-line-bar.vue';
import SeriesBar from '@/components/common/echart/series/series-bar.vue';
import SeriesLine from '@/components/common/echart/series/series-line.vue';
import Legend from '@/components/common/echart/legend/legend.vue';
import SeriesPie from '@/components/common/echart/series/series-pie.vue';
import SeriesTree from '@/components/common/echart/series/series-tree.vue'; // 关系图
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';
import ShapeSankey from '@/components/common/echart/shape/shape-sankey.vue';
import ShapeShape from '@/components/common/echart/shape/shape-shape.vue';
export default {
  components: { ShapeLineBar, SeriesPie, Legend, ShapeSankey, SeriesBar, SeriesLine, ShapeShape, SeriesTree },
  mixins: [EchartCommonMixin],
  props: {
    form: Object,
    config: Object,
  },
  data() {
    return {
      activeTab: '',
      activeBarLineTab: 'series-bar',
    };
  },
  computed: {
    tabClass() {
      if (this.hasProp('shapeSetting') && this.hasProp('legendSetting')) {
        return '';
      } else {
        return 'hide_tabs';
      }
    },
    hasBarLine() {
      return this.hasProp('series-bar') && this.hasProp('series-line');
    },
  },
  watch: {},
  mounted() {
    this.initActiveTab();
  },
  methods: {
    initActiveTab() {
      if (this.hasProp('shapeSetting')) {
        this.activeTab = 'shapeSetting';
      } else if (this.hasProp('legendSetting')) {
        this.activeTab = 'legendSetting';
      } else {}
    },
  },
};
</script>
<style lang="less" scoped>
@import '../less/echart-common.less';
.echart-shape {
  :deep(.hide_tabs) {
    .el-tabs__header {
      display: none;
    }
  }
}
</style>
